﻿@page "/components/dialog"

<DocsPage MaxWidth="MaxWidth.Large">
    <DocsPageHeader Title="Dialog">
        <Description>A dialog will overlay your current app content, providing the user with either information, a choice, or other tasks.</Description>
    </DocsPageHeader>
    <DocsPageContent>

        <DocsPageSection>
            <MudText Typo="Typo.h6" GutterBottom="true">Note</MudText>
            <MudText>The Dialog is dependant on <CodeInline Class="docs-code-tertiary">IDialogService</CodeInline> and <CodeInline>MudDialogProvider</CodeInline></MudText>
            <MudText>Check the <MudLink Href="/getting-started/installation">Installation</MudLink> page for instructions regarding default setup.</MudText>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader>
                <Title>Usage</Title>
                <Description>
                    Suppose you define a <CodeInline>MudDialog</CodeInline> in <CodeInline Class="docs-code-tertiary">TermsOfServiceDialog.razor</CodeInline>. 
                    To show the dialog you simply call:
                    <p> 
                    <CodeInline>DialogService.Show&lt;<CodeInline Class="docs-code-tertiary">TermsOfServiceDialog</CodeInline>&gt;("Terms");</CodeInline>
                    </p>
                    The advantage of having the dialog in its own razor component is obviously the ability to reuse it throughout your code-base. 
                    You can pass parameters to your dialog on show which allow you to load the dialog with custom data.
                </Description>
            </SectionHeader>
            <SectionContent Outlined="true">
                <DialogUsageExample />
            </SectionContent>
            <MudTabs Rounded="true" Outlined="true" Class="mt-4">
                <MudTabPanel Text="Page.razor" >
                    <SectionSource Code="DialogUsageExample" GitHubFolderName="Dialog" Class="mt-n11" />
                </MudTabPanel>
                <MudTabPanel Text="Dialog.razor" >
                    <SectionSource Code="DialogUsageExample_Dialog" GitHubFolderName="Dialog" Class="mt-n11" />
                </MudTabPanel>
            </MudTabs>
        </DocsPageSection>
        <DocsPageSection>
            <MudDivider Class="my-16" Style="opacity: 0;" />
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader>
                <Title>Configuration</Title>
                <Description>
                    The dialogs default behavior can be changed in two ways, either globaly with parameters in the <CodeInline>&lt;MudDialogProvider/&gt;</CodeInline> or pass down the <CodeInline>DialogOptions</CodeInline> class when you open the dialog.
                </Description>
            </SectionHeader>
            <SectionHeader>
                <SubTitle>1. Global Settings</SubTitle>
                <Description>In the file where you added <CodeInline>&lt;MudDialogProvider/&gt;</CodeInline> we can pass down different options as parameters. See <MudLink Href="/getting-started/installation">installation page</MudLink> for more information regarding this.</Description>
            </SectionHeader>
            <MarkdownDialogParameters />
            <SectionHeader>
                <SubTitle>2. Per Dialog (on open)</SubTitle>
                <Description>
                    Below we pass along the DialogOptions class when we open the dialog, this can be done per dialog or you can predefine a bunch of them that you use for specific cases in your system.<br />
                </Description>
            </SectionHeader>
            <SectionContent Outlined="true">
                <DialogOptionsExample />
            </SectionContent>
            <MudTabs Rounded="true" Outlined="true" Class="mt-4">
                <MudTabPanel Text="Page.razor" >
                    <SectionSource Code="DialogOptionsExample" GitHubFolderName="Dialog" Class="mt-n11" />
                </MudTabPanel>
                <MudTabPanel Text="Dialog.razor" >
                    <SectionSource Code="DialogUsageExample_Dialog" GitHubFolderName="Dialog" Class="mt-n11" />
                </MudTabPanel>
            </MudTabs>
            <SectionHeader>
                <SubTitle>3. Per Dialog (from dialog)</SubTitle>
                <Description>
                    The title and the options can also be modified from the dialog component itself by calling <CodeInline>SetTitle</CodeInline> and <CodeInline>SetOptions</CodeInline> on the <CodeInline>MudDialogInstance</CodeInline> object.
                </Description>
            </SectionHeader>
            <SectionContent Outlined="true">
                <DialogSetOptionsExample />
            </SectionContent>
            <MudTabs Rounded="true" Outlined="true" Class="mt-4">
                <MudTabPanel Text="Page.razor" >
                    <SectionSource Code="DialogSetOptionsExample" GitHubFolderName="Dialog" Class="mt-n11" />
                </MudTabPanel>
                <MudTabPanel Text="Dialog.razor" >
                    <SectionSource Code="DialogSetOptionsExample_Dialog" GitHubFolderName="Dialog" Class="mt-n11" />
                </MudTabPanel>
            </MudTabs>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader>
                <Title>Templating and Passing Simple Data</Title>
                <Description>In this section we will demonstrate how you can build one dialog but use it for multiple purposes.</Description>
            </SectionHeader>
            <SectionContent Outlined="true">
                <DialogTemplateExample />
            </SectionContent>
            <MudTabs Rounded="true" Outlined="true" Class="mt-4">
                <MudTabPanel Text="Page.razor" >
                    <SectionSource Code="DialogTemplateExample" GitHubFolderName="Dialog" Class="mt-n11" />
                </MudTabPanel>
                <MudTabPanel Text="Dialog.razor" >
                    <SectionSource Code="DialogTemplateExample_Dialog" GitHubFolderName="Dialog" Class="mt-n11" />
                </MudTabPanel>
            </MudTabs>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader>
                <Title>Passing Data</Title>
                <Description>Here is a little more advanced use case, we will use the same dialog but feed it with different server data and then mimmic a delete operation.</Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true">
                <DialogPassingDataExample />
            </SectionContent>
            <MudTabs Rounded="true" Outlined="true" Class="mt-4">
                <MudTabPanel Text="Page.razor" >
                    <SectionSource Code="DialogPassingDataExample" GitHubFolderName="Dialog" Class="mt-n11" />
                </MudTabPanel>
                <MudTabPanel Text="Dialog.razor" >
                    <SectionSource Code="DialogPassingDataExample_Dialog" GitHubFolderName="Dialog" Class="mt-n11" />
                </MudTabPanel>
            </MudTabs>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader>
                <Title>Scrollable Dialog</Title>
                <Description>Quick example on how to give your dialog scrollable content.</Description>
            </SectionHeader>
            <SectionContent Outlined="true">
                <DialogScrollableExample />
            </SectionContent>
            <MudTabs Rounded="true" Outlined="true" Class="mt-4">
                <MudTabPanel Text="Page.razor" >
                    <SectionSource Code="DialogScrollableExample" GitHubFolderName="Dialog" Class="mt-n11" />
                </MudTabPanel>
                <MudTabPanel Text="Dialog.razor" >
                    <SectionSource Code="DialogScrollableExample_Dialog" GitHubFolderName="Dialog" Class="mt-n11" />
                </MudTabPanel>
            </MudTabs>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader>
                <Title>Inlining Dialog</Title>
                <Description>
                    You can inline <CodeInline>MudDialog</CodeInline> directly in another component which of course makes most sense for small dialogs that are not re-used somewhere else.
                    The advantage is that you can easily share code and data between dialog and owning component via bindings.
                    <br />
                    This example also shows how to override the dialog title with a render fragment. 
                </Description>
            </SectionHeader>
            <SectionContent Outlined="true">
                <DialogInlineExample />
            </SectionContent>
            <SectionSource Code="DialogInlineExample" GitHubFolderName="Dialog" Class="mt-8" />
        </DocsPageSection>

    </DocsPageContent>
</DocsPage>
